<template>
  <NavBarVue :title="couponGroupData[status]?.title"/>
  <view class="wait-consum" v-if="status === '0'">
    <view class="coupon-name">{{couponDetails?.couponName}}</view>
    <view class="validity-period">有效期至 {{couponDetails?.createAt}}</view>
    <view class="QR-code">
      <view class="code-header">
        <view class="top">
          <text>券码</text>
          <view style="display: flex;align-items: center;" @click="shareFriends">
            <!-- <text style="margin-right: 20rpx;">发送给朋友</text> -->
            <button open-type="share">发送给朋友</button>
            <up-icon name="arrow-right" size="20"></up-icon>
          </view>
        </view>
        <view class="bottom">
          <text>{{couponDetails?.shopName}}</text>
        </view>
      </view>
      <view class="code-body">
        <view class="code">
          <BaseCoverImage :src="couponDetails?.couponUrl"/>
        </view>
      </view>
    </view>
  </view>
  <view class="useDetails" v-else>
    <view class="details">
      <BaseCoverImage :style="{width: '200rpx',height: '200rpx',marginLeft: '30rpx'}"></BaseCoverImage>
      <view class="" style="margin-left: 20rpx;">
        <view class="h3">{{couponDetails?.couponName}}</view>
        <view class="">
          <text
              style="font-size: 20rpx;color:orange;margin-left: 10rpx;background: rgb(240,240,240);">随时退
          </text>&nbsp;
          <text style="font-size: 20rpx;background: rgb(240,240,240);">过期退</text>
        </view>
        <view class="" style="font-size: 26rpx;">{{couponDetails?.describes}}</view>
        <view class="" style="margin-top: 20rpx;">
          <text
              style="font-size: 50rpx; color: orange;font-weight: bold;">￥688
          </text>
          <text
              style="border:1rpx solid orange;color:orange;font-size: 20rpx;margin: 10rpx;padding: 10rpx;">8折热销中
          </text>
        </view>
      </view>
    </view>
    <image src="/static/stamp.png" style="width:100%;height: 280rpx;margin: 20rpx;"></image>
    <text class="h2">券码信息</text>
    <text
        style="font-size: 20rpx;color:orange;margin-left: 10rpx;background: rgb(255, 240, 232);">以消费
    </text>
    <view style="font-size: 20rpx;color: rgb(190,190,190);margin-top: 20rpx;margin-left: 30rpx;">
      {{couponDetails?.endDate}}到期
    </view>
    <view class="h2" style="">
      · 7011 3928 2929 12
    </view>
    <view class="isolation"></view>
    <view class="merchant">
      <view class="merchant_top">
        <view class="h2">{{couponDetails?.describes}}</view>
        <view
            style="font-size: 26rpx;color: rgb(179, 179, 179);margin-top: 20rpx;margin-left: 30rpx;margin-right: 20rpx;">
          3家门店通用 >
        </view>
      </view>
      <view class="merchant_main">
        <view class="">
          <view style="margin-left: 30rpx;font-weight: bold;">
            千人食府(中华大厦店)
          </view>
          <view
              style="font-size: 26rpx;color: rgb(179, 179, 179);margin-left: 30rpx;margin-right: 20rpx;display:flex;margin-bottom: 30rpx;">
            <u-icon name="map"></u-icon>
            <text>海淀区上地东路一号院环洋大厦</text>
          </view>
        </view>
        <view style="margin-right: 25rpx">
          <u-icon name="phone-fill"></u-icon>
        </view>
      </view>
    </view>
    <view class="isolation"></view>
    <view class="menu">
      <view class="h2">
        套餐详情
      </view>
      <view style="margin-left: 30rpx;font-weight: bold;">
        主菜(2选1)
      </view>
      <view class="p">
        ·招牌千岛湖现焖鱼头(半只)(1份)
      </view>
      <view class="p">
        ·捞菜黄牛肉
      </view>
    </view>
  </view>
  <TabBarVue/>
</template>

<script setup>
import TabBarVue from '../../../components/TabBar.vue';
import NavBarVue from '../../../components/NavBar.vue';
import {onLoad} from '@dcloudio/uni-app'
import {useUserReceive, useBusinessStore, useChainStore} from '../../../store'
import {onMounted, ref, reactive} from 'vue'

const userReceive = useUserReceive()
const useBusiness = useBusinessStore()
const chainStore = useChainStore()
const userId = ref(null)
const couponCode = ref(null)
const status = ref(null)
onLoad((e) => {
  userId.value = e.userId
  couponCode.value = e.couponCode
  status.value = e.status
})

const couponDetails = ref({})
const couponGroupData = reactive({
      "0": {
        title: "待消费"
      },
      "1": {
        title: "使用详情"
      }
    },
)

let chainData = ref([])
onMounted(async () => {
  const res = await userReceive.userReceiveDetial({
    userId: userId.value,
    couponCode: couponCode.value
  })
  couponDetails.value = res?.data
  // await useBusiness.findBusinessId(res?.businessId)
  chainData.value = await chainStore.chainGetAll({
    areaId: 1,
    cityId: 1,
    pageNo: 1,
    pageSize: 10,
    provinceId: 1,
    storeName: res?.data?.shopName
  })
  console.log(chainData.value.objects[0], "| chainData.value");
})

// 分享给朋友
function shareFriends() {
  uni.share({
    provider: "weixin",
    scene: "WXSceneSession",
    type: 0,
    href: "http://uniapp.dcloud.io/",
    title: "uni-app分享",
    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
    imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });
}

</script>

<style lang="scss" scoped>
.wait-consum {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80rpx;
  background-color: #EAEAEA;

  .coupon-name {
    margin-bottom: 15rpx;
    font-weight: 500;
    font-size: 36rpx;
    color: #222222;
  }

  .validity-period {
    margin-bottom: 48rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #9C9C9C;
  }

  .QR-code {
    width: 100%;
    // height: 670rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .code-header {
      display: flex;
      flex-direction: column;

      .top {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 20rpx 20rpx 50rpx;
      }

      .top > text:nth-child(1) {
        font-size: 40rpx;
        color: #222222
      }

      .top > text:nth-last-child(1) {
        font-size: 30rpx;
        color: #9C9C9C
      }

      .top button {
        background-color: transparent;
        border-radius: 0px;
        box-sizing: border-box;
        color: #000;
        display: block;
        font-size: 18px;
        padding-right: 14px;
        text-align: center;
        text-decoration: none;
        border: none !important;
      }

      .bottom {
        font-size: 50rpx;
        padding-left: 50rpx;
      }
    }

    .code-body {
      display: flex;
      justify-content: center;
      align-items: center;

      .code {
        margin-top: 60rpx;
        width: 400rpx;
        height: 400rpx;
        // background-color: #9C9C9C;
      }
    }
  }

  .QR-code::after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    position: absolute;
    top: 30%;
    background-color: #EAEAEA;
  }

  .QR-code::before {
    content: "";
    display: block;
    height: 30px;
    width: 15px;
    border-radius: 0 15px 15px 0;
    position: absolute;
    top: calc(30% - 15px);
    left: -2px;
    background-color: #EAEAEA;
  }
}

.useDetails {
  overflow-x: hidden;

  .top {

    display: flex;
    background: white;
    height: 100rpx;
    line-height: 100rpx;
    padding: 30rpx;
  }

  .details {
    display: flex;
  }

  .h3 {
    font-size: 30rpx;
    font-weight: bold;

  }

  .h2 {
    font-size: 40rpx;
    font-weight: bold;
    padding: 30rpx;

  }

  .isolation {
    width: 100%;
    height: 20rpx;
    background: rgb(240, 240, 240)
  }

  .merchant {
    .merchant_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .merchant_main {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .p {
    margin-left: 30rpx;
    color: rgb(190, 190, 190);
    margin-top: 20rpx;
    font-size: 26rpx;
  }
}
</style>